<template>
  <transition name="slid-left">
    <music-list :title="disc.dissname" :avatar="disc.imgurl" :songs="songs"></music-list>
  </transition>
</template>

<script type="text/ecmascript-6">
import { mapGetters } from 'vuex'
import { getcdinfo } from 'api/recommend'
import MusicList from 'components/music-list/music-list'
import { createSong } from 'common/js/song'

export default {
  name: 'disc',
  components: {
    MusicList
  },
  data() {
    return {
      songs: []
    }
  },
  computed: {
    ...mapGetters({
      disc: 'disc'
    })
  },
  methods: {
    _normalizeSongs(list) {
      let ret = []
      list.forEach((item) => {
        // console.log(item)
        let musicData = item
        if (musicData.songid && musicData.albummid) {
          ret.push(createSong(musicData))
        }
      })
      return ret
    }
  },
  created() {
    // console.log(this.disc)
    if (!this.disc || !this.disc.dissid) {
      this.$router.push('/recommend')
      return
    }
    getcdinfo(this.disc.dissid).then((cdlist) => {
      if (cdlist && cdlist.songlist) {
        this.songs = this._normalizeSongs(cdlist.songlist)
      }
    })
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
.slid-left-enter-active, .slid-left-leave-active
  transition: all .6s
.slid-left-enter, .slid-left-leave-to
  transform: translate3d(100%, 0, 0)

</style>
